<template>
  <div class="strategy list-page">
    <div class="function-area">
      <el-button @click="toAdd">添加策略</el-button>
    </div>
    <div class="list-area">
      <el-table :data="list">
        <el-table-column label="策略名" prop="name"></el-table-column>
        <el-table-column label="备注" prop="remarks"></el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="text" @click="toEdit(row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog v-model="showDialog" :title="dialogTitle">
      <StrategyInfo
        v-if="showDialog"
        :aim="aim"
        :info="activeItem!"
        @close="showDialog = false"
        @confirm="handleConfirm"
      />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import StrategyInfo from './StrategyInfo.vue'
import type { StrategyItem } from './model'
import { useList } from '@/hooks/useList'

const { list, activeItem, showDialog, aim, dialogTitle, toAdd, toEdit, handleConfirm } =
  useList<StrategyItem>({
    listKey: 'strategyList'
  })
</script>

<style lang="scss" scoped>
@import '@/assets/list.scss';
</style>
